<template>
  <StaticTable :loading="loading" :tableList="data">
    <el-table-column label="序号" align="center" prop="staticIndex" width="80" />
    <el-table-column label="名称" prop="adName" align="center" />
    <el-table-column label="类型" width="100" align="center">
      <template #default="{ row }">
        <dict-tag :options="options.type" :value="row.adType" />
      </template>
    </el-table-column>
    <el-table-column label="屏幕" width="120" align="center">
      <template #default="{ row }">
        <dict-tag :options="options.position" :value="row.palyAdPosition" />
      </template>
    </el-table-column>
    <el-table-column label="内容" align="center">
      <template #default="{ row }">
        <el-image
          v-if="row.adType == 1"
          style="max-height: 140px"
          :src="row.adUrl"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-teleported="true"
          :preview-src-list="[row.adUrl]"
        />
        <video v-else style="max-width: 100%" :autoplay="false" controls :src="row.adUrl"></video>
      </template>
    </el-table-column>
    <!-- <el-table-column label="操作" align="center" fixed="right" width="100">
      <template #default="{ row }">
        <el-button link type="primary" @click="pushAd(row, 'detail')"> 广告推送 </el-button>
      </template>
    </el-table-column> -->
  </StaticTable>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDeviceAd } from '@/api/device/index'

const props = defineProps({
  machineId: [String, Number]
})

const { proxy } = getCurrentInstance()
const options = reactive({
  type: [],
  position: []
})

const loading = ref(false)
const data = ref([])

watchEffect(async () => {
  if (props.machineId) {
    loading.value = true
    try {
      const r = await getDeviceAd(props.machineId)
      data.value = r?.data ?? []

      if (!options.type.length) {
        options.type = proxy.useDict('device_ad_type').device_ad_type
        options.position = proxy.useDict('device_ad_position').device_ad_position
      }
    } finally {
      loading.value = false
    }
  }
})

// 广告推送
function pushApk(data) {
  ElMessageBox.confirm('确认要推送该广告吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    center: false
  }).then(() => {
    // pushApkVerions({
    //   machineId: [props.machineId],
    //   appVersionNo: data.versionNo
    // }).then(() => {
    //   ElMessage.success('推送成功')
    // })
  })
}
</script>
